<template>
  <div class="mains">
    <div class="top">
      <div style="width: 30%;height: 600px;">
        <div class="topa">
          <div class="tops">
            <div class="topb">
              <el-icon :size="60" color="#40C9C6">
                <grid />
              </el-icon>
            </div>
            <div class="topb">
              <h4>商品数量</h4>
              <h4>{{this.arr.goodsCount}}</h4>
            </div>
          </div>
          <div class="tops">
            <div class="topb">
              <el-icon :size="60" color="#36A3F7">
                <chat-dot-square />
              </el-icon>
            </div>
            <div class="topb">
              <h4>未发货单</h4>
              <h4>{{this.arr.waitStockCount}}</h4>
            </div>
          </div>
        </div>
      </div>
      <div id="main" style="width: 70%;height: 600px;"></div>
    </div>

    <div class="top">
      <div id="main2" style="width: 100%;height: 600px;"></div>
      <div id="main3" style="width: 100%;height: 600px;"></div>
      <div id="main4" style="width: 100%;height: 600px;"></div>
    </div>
  </div>
</template>

<script>
import { post } from '@/utils/http.js' // 引入封装工具
import * as echarts from 'echarts';
import { Grid, ChatDotSquare } from "@element-plus/icons-vue";


export default {
  components: { Grid, ChatDotSquare },

  data() {
    return {
      arr: []
    }
  },

  mounted() {
    this.indexs()
  },

  methods: {
    // 可视化数据
    indexs() {
      let data = {
        _gp: "admin.dashboard",
        _mt: "integral",
      }
      post(data).then(res => {
        console.log(res);
        this.arr = res.data.data
        this.order();
        // 成交金额
        this.money();
        // 地区
        this.region();
        // 渠道
        this.channel();

      })
    },

    // 图一
    order() {
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        color: '#00B5FF',
        title: {
          text: '七日订单',
          subtext: '订单数'
        },
        legend: { // 设置头部图例过滤
          data: ['订单数'],  // 图例的名称
          show: true,
          right: 10, // 图例居右位置
          top: 6  // 图例居上位置
        },
        xAxis: [
          {
            type: 'category',
            data: this.arr.daysSum[0],//分类
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: {},
        series: [
          {
            name: '订单数',
            type: 'bar',
            barWidth: '40%',
            data: this.arr.daysOrder[1],
          },
        ]
      };
      option && myChart.setOption(option);


    },

    // 折线图
    money() {
      var chartDom = document.getElementById('main2');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: '七日成交金额',
          subtext: '订单数'
        },
        xAxis: {
          type: 'category',
          data: this.arr.daysOrder[0]
        },
        yAxis: {},
        legend: { // 设置头部图例过滤
          data: ['订单数'],  // 图例的名称
          show: true,
          right: 10, // 图例居右位置
          top: 6  // 图例居上位置
        },
        series: [
          {
            name: '订单数',
            type: 'line',
            data: this.arr.daysSum[1],
          }
        ]
      };

      option && myChart.setOption(option);
    },
    // 饼图
    region() {
      var chartDom = document.getElementById('main3');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: '订单地区分布',
          left: 'left'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: 10, // 图例居右位置
          top: 6  // 图例居上位置
        },
        series: [{
          name: '地区分布',
          type: 'pie',
          radius: '50%',
          data: this.arr.area,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      };

      option && myChart.setOption(option);
    },
    // 饼状图
    channel() {
      var chartDom = document.getElementById('main4');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: '订单渠道分布',
          left: 'left'
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: this.arr.channel,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      option && myChart.setOption(option);
    }

  },

}
</script>

<style lang="less" scoped>
.mains {
  background-color: #f0f2f5;
}
.top {
  display: flex;
}

.tops {
  width: 80%;
  height: 150px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 60px;
  background-color: #fff;
}
// .topa {
//   width: 80%;
//   height: 150px;
// }
.topb {
  margin: 30px;
}
</style>
